<template>
  <cement-content
    :title="title"
    :expandTitle="expandTitle"
    :search="search"
    @getData="getBorehole"
    @deleteRow="deleteBorehole"
    @submitUpdate="submitBoreholeUpdate"
    @submitSearchModel="submitBoreholeSearchModel">
  </cement-content>
</template>

<script>
import cementContent from '@/components/cement-content'
import {BOREHOLE_TITLE, EXPAND_BOREHOLE_TITLE, BOREHOLE_SEARCH_DATA} from '@/util/constant'
import {mapGetters, mapMutations} from 'vuex'
import {getBorehole, deleteWell, updateWell} from '@/api/module/borehole'
import {get} from 'lodash'

export default {
  name: 'index',
  components: {
    cementContent
  },
  data () {
    return {
      title: BOREHOLE_TITLE,
      expandTitle: EXPAND_BOREHOLE_TITLE,
      search: BOREHOLE_SEARCH_DATA
    }
  },
  methods: {
    ...mapMutations([
      'changeTableData',
      'changeTotal',
      'closeDialog',
      'changeCurrentPage'
    ]),
    getBorehole () {
      getBorehole(this.currentPageGetters - 1, this.pageSizeGetters, this.searchModelGetters).then((res) => {
        this.changeTableData(get(res, 'data.data.content', []))
        this.changeTotal(get(res, 'data.data.totalElements', 0))
      })
    },
    deleteBorehole (row) {
      if (get(row, 'wellId')) {
        deleteWell(row['wellId'])
      }
    },
    submitBoreholeSearchModel () {
      this.changeCurrentPage(1)
      this.getBorehole()
    },
    submitBoreholeUpdate () {
      if (get(this.updateModelGetters, 'wellId')) {
        updateWell(get(this.updateModelGetters, 'wellId'), this.updateModelGetters).then(
          this.closeDialog()
        )
      }
    }
  },
  computed: {
    ...mapGetters([
      'pageSizeGetters',
      'currentPageGetters',
      'searchModelGetters',
      'updateModelGetters'
    ])
  },
  mounted () {
    this.getBorehole()
  }
}
</script>
